<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回调地狱</title>
</head>

<body>

</body>

</html>
<script>
    // 地狱回调：回调函数套回调函数的情况就叫做回调地狱，
    // 解决方式  1.Promise    2.async/await

    //地狱回调
    setTimeout(function () {  //第一层
        console.log('武林要以和为贵');
        setTimeout(function () {  //第二程
            console.log('要讲武德');
            setTimeout(function () {   //第三层
                console.log('不要搞窝里斗');
            }, 1000)
        }, 2000)
    }, 3000)



    // promise解决方式
    function fn(str) {
        var p = new Promise(function (resolve, reject) {
            //处理异步任务
            var flag = true;
            setTimeout(function () {
                if (flag) {
                    resolve(str)
                }
                else {
                    reject('操作失败')
                }
            })
        })
        return p;
    }

    fn('武林要以和为贵')
        .then((data) => {
            console.log(data);
            return fn('要讲武德');
        })
        .then((data) => {
            console.log(data);
            return fn('不要搞窝里斗')
        })
        .then((data) => {
            console.log(data);
        })
        .catch((data) => {
            console.log(data);
        })


    // async/await解决方式
    //封装一个返回promise的异步任务
    function fn(str) {
        var p = new Promise(function (resolve, reject) {
            var flag = true;
            setTimeout(function () {
                if (flag) {
                    resolve(str)
                } else {
                    reject('处理失败')
                }
            })
        })
        return p;
    }

    //封装一个执行上述异步任务的async函数
    async function test() {
        var res1 = await fn('武林要以和为贵');  //await直接拿到fn()返回的promise的数据，并且赋值给res
        var res2 = await fn('要讲武德');
        var res3 = await fn('不要搞窝里斗');
        console.log(res1, res2, res3);
    }
    //执行函数
    test();
</script>